<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>弹性布局</title>
		<style>
			#main{
				border: 2px solid red;
				display: flex;
			 
				flex-flow: row wrap-reverse; 
				/* justify-content: center; */
				justify-content: space-around;
				align-items: center; 
			}
			#main>div{
				height: 100px;
				width: 100px;
				line-height: 100px;
				margin: 5px;
				background-color: aquamarine;
				font-size: 20px;
				text-align: center;
				color: white;
				flex-grow:1;
			}
			#main #d5{
				height: 230px;
				line-height: 230px;
				order: 20;
				
			}
			#main #d7{
				flex-grow:2;
			}
		</style>
	</head>
	<body>
		<div id="main">
			<div>1</div>
		
			<div id="d5">五</div>
			
			<div id="d7" style="order:-3">7</div>
			<div>8</div>
		</div>
	</body>
</html>